import router from "@/router";
import { useUserStore } from "./stores/user";
import pinia from "@/stores";
import NProgress from "nprogress";
import "nprogress/nprogress.css";

/**
 * 每一个仓库内部会调用 pinia 实例
 * 组件直接可以访问：我们把 pinia 实例通过 app.use() 已经注册到组件中
 * 在非组件的环境下需要手动去指定 pinia 实例，并传入给 use 方法
 */
const userStore = useUserStore(pinia);

// 路由白名单
const whiteList = ["/login", "/404"];

router.beforeEach(async (to, from, next) => {
  // 如果any路由作为静态路由（在动态路由没有处理之前就已经存在于路由表中了，那么这个时候，当我们首次进入页面的时候，就会触发any路由的匹配），如果我们访问的时候动态路由的地址，我们看到 to 其实是any路由，然后就被重定向到了 404
  /**
   * 1、把 any 路由从静态路由中移除，to 就不会被修改为 any 或 404
   * 2、注册完动态路由以后，通过 next(to) 重新执行一次导航
   * 3、把 any 路由在注册到路由表（访问不存在的地址出现空白页面），在动态路由注册完成后注册这个 any 路由
   */
  // console.log(to);
  // 开启进度展示（模拟的，如果不调用 end() 永远就无法结束）
  NProgress.start();
  //   setTimeout(() => {
  //     NProgress.inc(1);
  //     NProgress.done();
  //   }, 2000);

  //   console.log("beforeEach");
  // 用户身份的鉴别
  // 1、获取到当前用户访问的url信息
  //    - 通过 beforeEach 回调函数的参数来获取
  // 2、获取到当前用户的身份信息
  //   console.log(to);
  // 流程
  // 1、判断当前仓库中是否存在 token
  //   console.log(userStore.token);

  // 获取url中是否存在 redirect
  const redirectPath: string = to.query.redirect as string;
  // console.log(redirectPath);

  if (userStore.token) {
    // 访问的是 login 页面，我们可以跳转到首页
    if (to.path == "/login") {
      // 终止当前函数的执行，也可以把 后续代码放在 else 中去执行
      //   不要在一次路由守卫函数中执行多次 next 的调用
      // console.log(123, redirectPath);
      return next(redirectPath ? redirectPath : { name: "HomeIndex" });
    }
    // next();
    // 判断是否存在用户基本信息
    if (userStore.userInfo.name) {
      // 直接放行
      next();
    } else {
      try {
        // 发送请求获取用户基本信息
        // console.log("发送请求获取用户基本信息");
        await userStore.getUserInfo();
        // 放行
        // 因为我们去掉了 any 路由的原因，导致之前就没有找到当前动态路由的匹配组件，所以看到了空白页面
        // next();
        // 重定向（以to为参数，重新定向）
        next(to);
      } catch (e) {
        // 如果获取用户基本信息失败了，表示当前 token 是有问题的
        console.log("有问题", e);
        next({ name: "Login" });
      }
    }
  } else {
    // 不存在 token，也不能直接跳转到 登录页面，不是所有页面都需要 token 的
    // 准备一个白名单，存储不需要token即可访问的url
    if (whiteList.includes(to.path)) {
      next();
    } else {
      next({ name: "Login" });
    }
  }
});

// 我们可以在 afterEach 中调用 NProgress.done()
router.afterEach(() => {
  // 进度条结束
  NProgress.done();
});
